<template>
	<view class="page">
		<!-- 搜索框开始 -->
		<view class="uni-search-bar" >
			<uni-search-bar 			
			placeholder="搜索科室,医生" 
			cancel-button="none" 
			radius="100"/>
		</view>
		<!-- 搜索框结束 -->
		
		<!-- 轮播图开始 -->
		<view class="uni-margin-wrap">
			<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					  <swiper-item v-for="(item, index) in data" :key="item._id">
						<view class="swiper-item">
						  <image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
						</view>
					  </swiper-item>
					</swiper>
				</view>
			</unicloud-db>
		</view>
		<!-- 轮播图结束 -->
		
		<!-- 主要内容开始 -->
		<view class="uni-card-warp">
			<uni-card margin="10rpx">
				<!-- 功能列表开始 -->
				<uni-grid :column="number" :show-border="false">
					<uni-grid-item v-for="(item,index) in functionList">
						<view class="grid-item-box">
							<image class="image-box" 
							:src="item.icon" 
							mode="scaleToFill" 
							style="width: 200rpx;height: 200rpx;"></image>
							<view class="text-box">
								<text>{{ item.text }}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
				<!-- 功能列表结束 -->
			</uni-card>
		</view>
		
		<!-- 就诊卡开始 -->
		<view class="card-wrap">
		  <uni-card 
		  class="uni-card"
			title="就诊卡" 
			mode="basic" 
			thumbnail="/static/img/card.png" 
			extra="查看详情 >">
			<view class="card-content">
			  <text>就诊卡号：1234567890</text>
			  <text>患者姓名：张三</text>
			</view>
		  </uni-card>
		</view>
		<!-- 就诊卡结束 -->
		
		<!-- 主要内容结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				
				number:3,
				functionList: [
					{text: '预约挂号', icon: '/static/img/reservation.png'},
					{text: '在线问诊', icon: '/static/img/consultation.png'},
					{text: '报告查询', icon: '/static/img/query.png'},
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	view{
		display: flex;	/* 弹性布局 */
		box-sizing: border-box;
		flex-direction: column;		/* column“列”：垂直方向上容器排列 */
	}
	.page{
		background-color: #eee;
	}
	
	.uni-search-bar{
		width: 750rpx;
		height: 50px;
	}
	
	.uni-margin-wrap{
		margin: 5rpx 10rpx;
		border-radius: 50rpx;
		overflow: hidden;
	}
	.swiper{
		height: 315rpx;
	}
	.banner-image {
		width: 750rpx;
		height: 315rpx;
	}
	
	.grid-item-box{
		align-items: center;
		justify-items: center;
		padding: 5px;
		font-size: 16px;
	}
	.image-box{
		border-radius: 30rpx;
	}
	.text-box{
		position: absolute;
		padding: 20rpx;
		color: #eee;
	}	
	
	.card-wrap {
	    margin: 10rpx;
	    border-radius: 15rpx;
	    overflow: hidden;
	    background-color: #ffffff;
	    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	  }
	
	  .uni-card {
	    border-radius: 15rpx;
	    background-color: #64C9C1;
	    color: #ffffff;
	  }
	
	  .uni-card::after {
	    border-radius: 15rpx;
	  }
	
	  .uni-card-title {
	    color: #ffffff;
	  }
	
	  .uni-card-extra {
	    color: #ffffff;
	  }
	
	  .card-content {
	    margin-top: 10rpx;
	    padding: 10rpx;
	    background-color: #ffffff;
	    border-radius: 15rpx;
	    margin: 10rpx;
	  }
	
	  .card-content text {
	    display: block;
	    margin-bottom: 5rpx;
	    color: #333333;
	  }
	
</style>
